<template>
<!--	//大白话:toRef(s)就是方便我们把响应式数据(ref,reactive)展开丢出去，方便在模版中应用-->

	<hr class="two" />
	<h2>==== ToRef  方便把响应式数据(ref,reactive)展开丢出去，方便在模版中应用 ===</h2>
	<h4>{{ person }}</h4>
	<h2>姓名:{{ name }}</h2>
	<h2>年龄:{{ age }}</h2>
	<h2>薪资:{{ salary }}K</h2>
	<button @click="name = name + '~'">修改姓名</button>
	<button @click="age++">增长年龄</button>
	<button @click="salary++">增长薪资</button>
</template>

<script>
import {ref, reactive, toRef, toRefs} from 'vue';

export default {
	name: 'ToRef',
	setup() {
		let person = reactive({
			name: '张三',
			age: 18,
			job: {
				j1: {
					salary: 20
				}
			}
		});
/*

		const name1 = person.name //注意输出 字符串，并不是响应式的数据（RefImpl /proxy）
		console.log('ToRef 单纯是个字符串:person.name:', name1); // 单纯是个字符串，
		console.log('ToRef toRef(person, name)', toRef(person, 'name'));//ObjectRefImpl 指明要绑定的属性：key值
		console.log('ToRef toRef(person, ’name‘)', toRef(person, name));//ObjectRefImpl 没有key值,相当于为 person新添一无名属性
		console.log('ToRef person', person)//Proxy 对象
		console.log('ToRef toRef(person)', toRef(person));//仅仅把 person 对象变成 ObjectRefImpl，里面的属性没变化
		console.log('ToRef toRefs(person),', toRefs(person));//每个属性都变成 ObjectRefImpl

*/

		//返回一个对象(toRef是引用 name就是person.name且为响应式)
		//toRef处理一个，而toRefs处理一群
		//大白话:toRef(s)就是方便我们把响应式数据(ref,reactive)展开丢出去，方便在模版中应用
		return {
			person,
			// name: toRef(person, "name"),
			// age: toRef(person, "age"),
			// salary: toRef(person.job.j1, "salary")
			...toRefs(person),
			// name: toRef(person, name),
			salary: toRef(person.job.j1, 'salary')  //toRef可以与toRefs连用,toRef 优先更加方便
		};


		//注意千万不能这样写 一旦这样写就与元数据分离了,改name不会引起person.name的变化
		// (因为ref把name值 包装成了另一个refImpl对象)，即const name =ref（'name'）
		/*		return {
					person,
					name: ref(person.name),
					age: ref(person.age),
					salary: ref(person.job.j1.salary)
				};*/
	}
}
</script>

<style>
</style>

